<template>
  <span class="item-wrap" :class="{'ui-menu-divider': item.type === 'divider'}"
        ref="item"
        @pointerenter.self="item.type !== 'divider' && menuEnter($event)"
        @pointerleave.self="item.type !== 'divider' && menuLeave()"
        @click="item.type !== 'divider' && click($event, item)"
  >
    <div v-if="item.type !== 'divider'"
         style="display: inline"
    >
      <div v-if="item.img"
                 class="btn btn-light rounded-0 rounded-left p-1  border-0"
                 :title="$t(item.title)"
      >
        <img class="d-block" width="20px" :src=item.img>
        <div class="custom-nav-content" v-if="customNavShow" style="display: block">
          <slot name="custom"/>
        </div>
      </div>
      <div v-else class="menu-item">
        <div v-if="supportChoiceItem" class="mr-1">
          <i class="fa fa-check" :class="[{'invisible': !item.chosen}]"></i>
        </div>
        <div class="text-ellipsis tw-flex-1" :title=$t(item.title)>
          {{ $t(item.title) }}
        </div>
        <div class="ml-1 mr-1">
          <i class="fa fa-angle-right" v-if="item.children && item.children.length > 0"/>
        </div>
      </div>
      <div class="childMenu" v-if="item.children && item.children.length > 0 && childMenuShow" ref="childMenu"
           @mousewheel="mouseWheel($event)">
        <VueContextMenuItem v-if="childItem.validate()" v-for="(childItem, index) in item.children" :item="childItem"
                            :key="index" :support-choice-item="item.supportChoiceItem"/>
      </div>
    </div>
  </span>
</template>

<script>

  export default {
    name: "BaseContextMenuItem",
    props: {
      item: Object,
      executeArgument: Object,
      supportChoiceItem: false,
    },
    data() {
      return {
        childMenuShow: false,
        customNavShow: false,
      }
    },
    methods: {
      click(e, item) {
        if (this.item.customNavBarName) {
          //
          e.stopPropagation();
          this.customNavShow = !this.customNavShow;
          return;
        }

        if (this.supportChoiceItem) {
          e.stopPropagation();
        }

        this.$emit('contextMenuClick', this.item);
        item.execute(this.executeArgument);
      },
      mouseWheel(e){
        e.stopImmediatePropagation()
      },
      menuEnter(e) {
        this.item.highlight();
        if (!this.item.children?.length) {
          return;
        }

        let targetPosition = e.target.getBoundingClientRect();
        let parentPosition = e.target.parentElement.getBoundingClientRect();
        this.childMenuShow = true;
        this.$nextTick(() => {
          if (document.body.clientHeight - targetPosition.top - 50 > 300) {
            this.$refs.childMenu.style.top = (targetPosition.top - parentPosition.top) + 'px';
            this.$refs.childMenu.style.maxHeight = (document.body.clientHeight - targetPosition.top - 50) + 'px';
          } else {
            this.$refs.childMenu.style.bottom = (parentPosition.bottom - targetPosition.bottom) + 'px';
            this.$refs.childMenu.style.maxHeight = (targetPosition.bottom - 150) + 'px';
          }
          
          if (parentPosition.right + this.$refs.childMenu.offsetWidth < document.body.clientWidth) {
            this.$refs.childMenu.style.left = parentPosition.width + 'px';
          } else {
            this.$refs.childMenu.style.right = parentPosition.width + 'px';
          }
        });
      },
      menuLeave() {
        if (this.item.customNavBarName) {
          this.customNavShow = false;
        }
        this.item.clearHighlight();
        this.childMenuShow = false;
      }
    },
  }
</script>

<style scoped>
  .ui-menu-divider {
    height: 1px;
    font-size: 0;
    line-height: 0;
    background-color: #1a1a1a;
    padding: 0!important;
  }

  .childMenu {
    position: absolute;
    width: 112px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 500px;
    background-color: var(--bg-color2);
    border-radius: 2px;
    box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, 0.1);
  }

  .childMenu::-webkit-scrollbar {
    width: 0;
  }

  .childMenu span:not(.ui-menu-divider):hover {
    background-color: var(--bg-color9);
  }

  .childMenu span {
    min-width: 60px;
    text-align: left;
    display: block;
    color: #1a1a1a;
    cursor: default;
    padding: 2px 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transition: .2s linear;
  }

  .menu-item {
    display: flex;
    align-items: center;
  }

  .custom-nav-content {
    position: absolute;
    transform: translateX(-4px);
    z-index: 1000;
  }
</style>